<template>
  <view class="message">
    <!-- 头像昵称 -->
    <view class="message-user">
      <view class="user-info">
        <view class="info-image">
          <image src="../../static/message/user_three.png" mode=""></image>
        </view>
        <view class="info-name">
          隔壁美女小美
        </view>
      </view>
      <view class="user-info">
        <view class="info-image">
          <image src="../../static/message/add-user.png" mode=""></image>
        </view>
      </view>
    </view>
    <!-- 头像昵称 -->
    <!-- 间隔槽 -->
    <u-gap height="10" bgColor="#F5F5F5"></u-gap>
    <!-- 间隔槽 -->
    <!-- 模块2 -->
    <view class="chat-box">
      <!-- 查看聊天记录 -->
      <view class="chat-records" @click="toSearch()">
        <view class="char-left">
          查看聊天记录
        </view>
        <view class="chat-right">
          <image src="../../static/message/more.png" mode=""></image>
        </view>
      </view>
      <!-- 消息免打扰 -->
      <view class="chat-records">
        <view class="char-left">
          消息免打扰
        </view>
        <view class="chat-right">
          <u-switch v-model="value" @change="change" activeColor="#FF2A31"></u-switch>
        </view>
      </view>
      <!-- 置顶聊天 -->
      <view class="chat-records">
        <view class="char-left">
          置顶聊天
        </view>
        <view class="chat-right">
          <u-switch v-model="value2" @change="change2" activeColor="#FF2A31"></u-switch>
        </view>
      </view>
      <!-- 清空聊天记录 -->
      <view class="chat-records" @click="show=true">
        <view class="char-left">
          清空聊天记录
        </view>
        <!-- 模态框 -->
        <view class="modal">
          <u-modal :show="show" :content='content' showCancelButton closeOnClickOverlay @confirm="confirm"
            @cancel="cancel" @close="close" cancelColor="#AAAAAA" confirmColor="#FF2A31" confirmText="清空"></u-modal>
        </view>
        <!-- 模态框 -->
        <view class="chat-right">
          <image src="../../static/message/more.png" mode=""></image>
        </view>
      </view>
    </view>
    <!-- 模块2 -->
    <!-- 间隔槽 -->
    <u-gap height="10" bgColor="#F5F5F5"></u-gap>
    <!-- 间隔槽 -->
    <!-- 投诉 -->
    <view class="comlplaint">
      <view class="chat-records" @click="toComplaint()">
        <view class="char-left">
          投诉
        </view>
        <view class="chat-right">
          <image src="../../static/message/more.png" mode=""></image>
        </view>
      </view>
    </view>
    <!-- 投诉 -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        value: true,
        value2: false,
        show: false,
        content: '确认删除和他的聊天记录吗？'
      };
    },
    methods: {
      change(e) {
        console.log('change', e);
      },
      change2(e) {
        console.log('change2', e);
      },
      confirm() {
        this.show = false
        console.log('confirm');
      },
      cancel() {
        this.show = false
        console.log('cancel');
      },
      close() {
        this.show = false
        console.log('close');
      },
      toSearch() {
        uni.navigateTo({
          url: '/pages/message/searchChat'
        })
      },
      toComplaint() {
        uni.navigateTo({
          url: '/pages/message/complaint'
        })
      },
    }
  }
</script>

<style lang="scss">
  .message {
    width: 100vw;
    border-top: 1px solid #F9F9F9;

    // 头像昵称
    .message-user {
      display: flex;
      background-color: #fff;
      padding-left: 5vw;

      .user-info {
        text-align: center;
        margin: 30rpx 40rpx 20rpx 0;

        .info-image {
          image {
            width: 120rpx;
            height: 120rpx;
          }
        }

        .info-name {
          font-size: 28rpx;
          color: #B1B1B1;
        }
      }
    }

    // 模块2
    .chat-box {
      background-color: #fff;

      .chat-records {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 5vw;
        border-bottom: 1px solid #F5F5F5;

        .char-left {
          font-size: 36rpx;
        }

        .chat-right {
          image {
            width: 25rpx;
            height: 40rpx;
            vertical-align: middle;
          }
        }

        // 模态框
        .modal {
          text-align: center;
        }
      }

      .chat-records:last-child {
        border-bottom: none;
      }
    }

    // 投诉
    .comlplaint {
      background-color: #fff;

      .chat-records {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 5vw;
        border-bottom: 1px solid #F5F5F5;

        .char-left {
          font-size: 36rpx;
        }

        .chat-right {
          image {
            width: 25rpx;
            height: 40rpx;
            vertical-align: middle;
          }
        }
      }
    }
  }
</style>